@use 'sass:math';
@use '../tp';

.#{tp.$prefix}-sldv {
	&.#{tp.$disabled} {
		opacity: 0.5;
	}

	&_t {
		box-sizing: border-box;
		cursor: pointer;
		height: tp.cssVar('container-unit-size');
		margin: 0 math.div(tp.$slider-knob-size, 2);
		outline: none;
		position: relative;

		&::before {
			background-color: tp.cssVar('input-bg');
			border-radius: 1px;
			content: '';
			display: block;
			height: 2px;
			inset: 0;
			margin: auto;
			position: absolute;
		}
	}
	&_k {
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;

		&::before {
			background-color: tp.cssVar('input-fg');
			border-radius: 1px;
			content: '';
			display: block;
			height: 2px;
			inset: 0;
			margin-bottom: auto;
			margin-top: auto;
			position: absolute;
		}
		&::after {
			background-color: tp.cssVar('button-bg');
			border-radius: tp.cssVar('blade-border-radius');
			bottom: 0;
			content: '';
			display: block;
			height: tp.$slider-knob-size;
			margin-bottom: auto;
			margin-top: auto;
			position: absolute;
			right: math.div(-1 * tp.$slider-knob-size, 2);
			top: 0;
			width: tp.$slider-knob-size;
		}
	}
	&_t:hover &_k::after {
		background-color: tp.cssVar('button-bg-hover');
	}
	&_t:focus &_k::after {
		background-color: tp.cssVar('button-bg-focus');
	}
	&_t:active &_k::after {
		background-color: tp.cssVar('button-bg-active');
	}
}

// slider-text
.#{tp.$prefix}-sldtxtv {
	display: flex;

	&_s {
		flex: 2;
	}
	&_t {
		flex: 1;
		margin-left: 4px;
	}
}
